<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body class="layui-layout-body" style="padding: 10px">
<form class="layui-form">
    <div class="layui-inline">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="addressname" id="addressname" autocomplete="off" placeholder="地址名">
        </div>
        <div class="layui-inline">
            <select class="layui-input layui-select" name="fkuserid" id="fkuserid" lay-search="">

            </select>
        </div>
        <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        <button class="layui-btn" type="button" id="insert" data-type="insert">添加</button>
    </div>
</form>
<table id="table" lay-filter="tableFilter"></table>


<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>

</html>

<script>
    //JavaScript代码区域
    layui.use(['element','table','laydate','layer','form'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;

        table.render({
            id:"addressTable"
            ,elem: '#table'
            ,toolbar: '#toolbar'
            ,url:"/restful/find"
            ,page: true //开启分页
            ,method:"POST"
            ,contentType: 'application/json'
            ,where:{
                firstTable: 'addresses',
                relations:{"addresses.fkuserid": "users.userid"}
            }
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [ //表头
                    {field: 'addressid', title: 'ID', hide: true}
                    ,{field: 'username', title: '用户', sort: true, fixed: 'left'}
                    ,{field: 'addressname', title: '地址名',sort: true}
                    ,{field: 'contactphone', title: '联系电话', sort: true}
                    ,{field: 'addressdesc', title: '详细地址',width: 400 , sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#operationBar'}
                ]
            ]
            ,done : function () {
                var user = $('#fkuserid');
                if(user.children().length == 0){
                    $.ajax({
                        url:"/restful/find",
                        type:"POST",
                        data:JSON.stringify({"firstTable":"users"}),
                        contentType: "application/json;charset=utf-8",
                        dataType : "json",
                        async:false,
                        success : function(result) {
                            var data = result.data;
                            var count = result.count;
                            user.append('<option value="">全部用户</option>');
                            for(var i = 0 ; i < count ; i ++){
                                user.append("<option value='" + data[i].userid + "'>" + data[i].username + "</option>");
                            }
                            form.render("select");
                        },
                        error:function(msg){
                            layer.alert(msg);
                            $('#fkuserid').append("<option value=''>加载错误</option>");
                        }
                    });
                }

            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var addressname = $('#addressname').val();
                var fkuserid = $("#fkuserid option:selected").val();

                //执行重载-指定重载表格的id
                table.reload('addressTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        wheres: [
                            {field:"addresses.addressname", value: addressname, mode:"2"},
                            {field:"users.userid", value: fkuserid, mode:"1"}
                        ],
                        relations:{"addresses.fkuserid": "users.userid"}
                    }
                });
            }
        };

        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        $('#insert').on('click', function(){
            localStorage.clear();
            layer.open({
                type: 2,
                title: 'iframe父子操作',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['800px' , '520px'],
                content: "addressEdit",
                skin: 'layui-layer-rim',
                end : function(){
                    table.reload("addressTable");
                }
            });
        });


        //监听行工具事件
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                /**/
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/restful/delete/address",
                        type:"POST",
                        data:JSON.stringify([data.addressid]),
                        contentType: "application/json;charset=utf-8",
                        dataType : "json",
                        async : false,
                        success : function() {
                            obj.del();
                            layer.msg("删除成功", {icon:1});
                        },
                        error:function(msg){
                            layer.msg("删除失败", {icon:5});
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                // layer.msg('ID：'+ data.addressid + ' 的查看操作');
                localStorage.addressid = data.addressid;
                layer.open({
                    type: 2,
                    title: 'iframe父子操作',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['800px' , '520px'],
                    content: "addressEdit",
                    skin: 'layui-layer-rim',
                    end : function(){
                        table.reload("addressTable");
                    }
                });
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

    });
</script>